<!--
 * @Author: your name
 * @Date: 2021-09-23 09:00:04
 * @LastEditTime: 2021-09-23 10:36:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\components\HelloWorld.vue
-->
<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
    <canvas id="boxCanvas" style="width: 100%; height: 300px"></canvas>
  </div>
</template>

<script>
// const F2 = require('@antv/f2/lib/index')
// import F2 from '@antv/f2'
// const F2 = require('@antv/f2')
export default {
  name: "F2Demo",
  components: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    // this.boxCanvas()
    console.log(this.$F2)
  },
  // 方法集合
  methods: {
    // boxCanvas() {
    //   var data = [
    //     {
    //       year: "2015 年",
    //       sales: 145,
    //     },
    //     {
    //       year: "2016 年",
    //       sales: 121,
    //     },
    //     {
    //       year: "2017 年",
    //       sales: 100,
    //     },
    //     {
    //       year: "2018 年",
    //       sales: 97,
    //     },
    //     {
    //       year: "2019 年",
    //       sales: 85,
    //     },
    //   ];
    //   var chart = new this.$F2.Chart({
    //     id: "boxCanvas",
    //     pixelRatio: window.devicePixelRatio,
    //   });
    //   chart.source(data, {
    //     sales: {
    //       tickCount: 5,
    //     },
    //   });
    //   chart.tooltip({
    //     showItemMarker: false,
    //     onShow: function onShow(ev) {
    //       var items = ev.items;
    //       items[0].name = null;
    //       items[0].name = items[0].title;
    //       items[0].value = "¥ " + items[0].value;
    //     },
    //   });
    //   // 让柱状图的宽度适配不同的屏幕尺寸
    //   var barWidth = 36 * (window.innerWidth / 375);
    //   chart
    //     .interval()
    //     .position("year*sales")
    //     .color("l(90) 0:#1890ff 1:#70cdd0")
    //     .size(barWidth); // 定义柱状图渐变色
    //   chart.render();
    // },
  },
  // 计算属性
  computed: {},
};
</script>


<style scoped>
</style>
